<template>
    <div>
        <div class="app-container">
            <TopInfo />
            <Search :lookup="data.lookup" @investigate="inves" />
            <el-button v-prmis="'trip_multiple_add'" type="primary" size="small" @click="toAdd">
                <template #default>
                    <span class="text-sm">{{$t('goods.ctrips.add') }}</span>
                </template>
            </el-button>
        </div>
        <div class="app-container" v-loading="data.mtloading">
            <el-table :data="data.list" :header-cell-style="{ 'text-align': 'center' }"
                :cell-style="{ 'text-align': 'center' }" class="w-full">
                <el-table-column prop="tm_id" :label="$t('goods.ctrips.id')" width="70" />
                <el-table-column prop="tm_name" :label="$t('goods.ctrips.name')" />
                <el-table-column prop="pic" :label="$t('machine.goods.pic')">
                    <template #default="scope">
                        <img v-if="scope.row.pic" class="w-24 h-24 inline-block" :src="scope.row.pic" />
                        <img v-else class="w-24 h-24 inline-block" src="@/assets/product.png" />
                    </template>
                </el-table-column>
                <el-table-column :label="$t('machine.marketing.Applicable')">
                    <template #default="scope">
                        <span v-if="scope.row.designated_machine == 1"> {{$t('goods.ctrips.all')}}</span>
                        <span v-else class="text-[#409EFF] cursor-pointer" @click="toDetails(scope.row, 2)">
                            {{ scope.row.machineList.length || '0' }} {{$t('goods.groupM.unit')}}</span>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('goods.ctrips.hotels')">
                    <template #default="scope">
                        <span v-if="scope.row.designated_hotel == 1"> {{$t('goods.ctrips.all')}}</span>
                        <span v-else class="text-[#409EFF] cursor-pointer" @click="toDetails(scope.row, 3)">
                            {{ scope.row.hotelList.length || '0' }} </span>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('goods.corner.applica')">
                    <template #default="scope">
                        <span v-if="scope.row.designated_goods == 1"> {{$t('goods.ctrips.all')}}</span>
                        <span v-else class="text-[#409EFF] cursor-pointer" @click="toDetails(scope.row, 1)">
                            {{ scope.row.goodsList.length || '0' }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="rise_fall_ratio" :label="$t('goods.ctrips.ratio')" />
                <el-table-column prop="status" :label="$t('public.state')">
                    <template #default="scope">
                        <el-tag v-if="scope.row.status == 1" type="success">{{ $t('public.enable') }}</el-tag>
                        <el-tag v-else type="danger">{{ $t('public.disable') }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="ao_id" :label="$t('machine.infos.organiz')" show-overflow-tooltip>
                    <template #default="scope">
                        {{ getaoid(scope.row.ao_id) }}
                    </template>
                </el-table-column>
                <el-table-column prop="creator_nickname" :label="$t('goods.ctrips.creatorName')" />
                <el-table-column prop="create_time" :label="$t('date.createTime')">
                    <template #default="scope">
                        {{ getPlevel.gettime(scope.row.create_time, 3) }}
                    </template>
                </el-table-column>
                <el-table-column prop="update_time" :label="$t('date.modifyTime')">
                    <template #default="scope">
                        {{ getPlevel.gettime(scope.row.update_time, 3) }}
                    </template>
                </el-table-column>
                <el-table-column prop="l_id" :label="$t('public.operate')" width="140">
                    <template #default="scope">
                        <el-button v-prmis="'trip_multiple_getFind'" type="primary" size="small" @click="toEdit(scope.row)">
                            {{$t('public.edit')}}
                        </el-button>
                        <el-button v-prmis="'trip_multiple_del'" type="danger" :disabled="scope.row.hasChildren" size="small"
                            @click="del(scope.row)">
                            {{ $t('public.del')}}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <PageNum :total="data.total" :page="data.info" @exposeData="current" @fraction="fraction" />
        </div>
        <!-- 适用设备弹窗 -->
        <el-dialog v-model="isMachineDialog" :title="$t('machine.marketing.Applicable')" center width="700px" destroy-on-close>
            <el-table :data="mList" :header-cell-style="{ 'text-align': 'center' }"
                :cell-style="{ 'text-align': 'center' }" class="w-full" border>
                <el-table-column prop="machine_id" :label="$t('machine.code')" />
                <el-table-column prop="machine_name" :label="$t('machine.name')" />
            </el-table>
        </el-dialog>
        <!-- 组合商品弹窗 -->
        <el-dialog v-model="isGoodsDialog" :title="$t('goods.corner.applica')" center width="65%" destroy-on-close>
            <el-table :data="gList" style="width: 100%" border :header-cell-style="{ 'text-align': 'center' }"
                :cell-style="{ 'text-align': 'center' }">
                <el-table-column prop="g_name" :label="$t('machine.goods.name')" />
                <el-table-column prop="g_type" :label="$t('machine.goods.type')">
                    <template #default="scope">
                        {{ setType(scope.row) }}
                    </template>
                </el-table-column>
                <el-table-column prop="sku" label="SKU" />
                <el-table-column prop="pic" :label="$t('machine.goods.pic')">
                    <template #default="scope">
                        <img class="w-24 h-24 inline-block" :src="scope.row.pic" />
                    </template>
                </el-table-column>
                <el-table-column prop="selling_price" :label="$t('machine.goods.sellingPrice')" width="75" />
                <el-table-column prop="rise_fall_ratio" :label="$t('goods.groupM.ratio')+'(%)'" />
                <el-table-column prop="buy_lower" :label="$t('goods.groupM.lower')" />
                <el-table-column prop="buy_uppper" :label="$t('goods.groupM.upper')" />
                <el-table-column :label="$t('goods.groupM.required')">
                    <template #default="scope">
                        {{ scope.row.is_required == '1' ? $t('public.yes') : $t('public.no') }}
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <!-- 指定酒店 -->
        <el-dialog v-model="isHotel" :title="$t('goods.ctrips.hotels')" center width="1000px" destroy-on-close>
            <el-table :data="hList" :header-cell-style="{ 'text-align': 'center' }"
                :cell-style="{ 'text-align': 'center' }" class="w-full" border>
                <el-table-column prop="cityName" :label="$t('goods.ctrips.city')" />
                <el-table-column prop="hotelName" :label="$t('goods.ctrips.hotel')" />
                <el-table-column prop="hotelTel" :label="$t('goods.ctrips.phone')" />
                <el-table-column prop="rise_fall_ratio" :label="$t('goods.ctrips.ratio')" />
                <el-table-column :label="$t('goods.groupM.required')">
                    <template #default="scope">
                        {{ scope.row.is_required == '1' ? $t('public.yes') : $t('public.no') }}
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n' 
const { t: $t } = useI18n()
import TopInfo from '@/components/TopInfo/index.vue';
import Search from '@/components/Search/index.vue';
import PageNum from '@/components/PageNum/index.vue';
import { getripList, getripDel } from '@/api/goods_ctrips'
import { ElMessage, ElMessageBox } from 'element-plus'
import getPlevel from '@/utils/level'
import arrange from '@/utils/hierarchy';
import { useRouter } from 'vue-router';
import { onMounted } from 'vue'
let language = ref()
const { locale } = useI18n()
onMounted(() => {
    language.value = locale.value
})
const router = useRouter();

let data = reactive({
    aolist: [],
    mtloading: false, // 加载
    lookup: [ // 筛选栏
        { title: $t('goods.ctrips.name'), type: 'input', value: '', key: 'tm_name' },
        { title: $t('machine.infos.organiz'), type: 'define', select: [], value: '', key: 'ao_id' },
    ],
    list: [], // 列表信息
    info: { // 筛选数据
        page: '1',
        pageNum: '15'
    },
    total: 0, // 总条数
})
let performanceList = ref([])
let mList = ref([])
let gList = ref([])
let hList = ref([])
let isMachineDialog = ref(false)
let isHotel = ref(false)
let isGoodsDialog = ref(false)
let setType = (row: any) => {
    if (row.g_type == 1) {
        row.g_typeCn = $t('goods.groupM.normalGood')
    }
    if (row.g_type == 2) {
        row.g_typeCn = $t('goods.groupM.hotelGood')
    }
    if (row.g_type == 3) {
        row.g_typeCn = $t('goods.groupM.ticket')
    }
    return row.g_typeCn
}
let toDetails = (row: any, flag: number) => {
    if (flag == 1) {
        gList.value = row.goodsList
        isGoodsDialog.value = true
    }
    if (flag == 2) {
        mList.value = row.machineList
        isMachineDialog.value = true
    }
    if (flag == 3) {
        hList.value = row.hotelList
        isHotel.value = true
    }
}
let toMroe = (row: any) => {
    performanceList.value = JSON.parse(row.performance)
    isPerformance.value = true
}
// 获取接口信息
let geturl = async () => {
    let array = await arrange.arrange(1);
    for (let item of data.lookup) {
        if (item.key == 'ao_id') {
            item.select = []
            data.aolist = []
            for (let ime of array) {
                item.select.push({
                    label: ime.ao_id + ' - ' + ime.organization_name,
                    value: ime.ao_id
                })
                data.aolist.push({
                    label: ime.organization_name,
                    value: ime.ao_id
                })
            }
        }
    }
}
geturl()
// 组织架构名称
let getaoid = (e) => {
    let name = '--'
    for (let item of data.aolist) {
        if (item.value == e) {
            name = item.label
        }
    }
    return name
}
// 添加
let toAdd = () => {
    let query = {
        pages: 'add'
    }
    router.push({ path: '/goods/ctrips/details', query: query })
}
// 编辑
let toEdit = (row: any) => {
    let query = {
        id: row.tm_id,
        pages: 'edit'
    }
    router.push({ path: '/goods/ctrips/details', query: query })
}
// 删除
let del = (e: any) => {
    ElMessageBox.confirm($t('message.delData'))
        .then(res => {
            getripDel({ tm_id: e.tm_id }).then(res => {
                if (res.state == 200) {
                    ElMessage({
                        message: $t('message.delSuccess'),
                        type: 'success'
                    })
                    getlist()
                    return
                }
                ElMessage({
                    message: $t('message.networkFailed'),
                    type: 'error'
                })
            })
        })
}
// 获取列表
let getlist = () => {
    data.mtloading = true
    getripList(data.info).then(res => {
        data.mtloading = false
        if (res.state == 200) {
            data.list = res.data.data
            data.total = res.data.total
        }
    })
}
// 查询回调
let inves = (e: any) => {
    for (let key in e) {
        if (key != 'time') {
            data.info[key] = e[key]
        }
    }
    data.info.page = 1
    data.info.pageNum = 15
    getlist()
}
// 页数回调
let current = (e: any) => {
    data.info.page = e
    getlist()
}
// 条数回调
let fraction = (e: any) => {
    data.info.pageNum = e
    getlist()
}
getlist()
</script>
